import React from "react";
import { NavLink, Routes, Route } from "react-router-dom";

// import "./07-style.css";

const Home = () => {
  return <div>这是首页页面</div>;
};

const About = () => {
  return <div>这是关于页面</div>;
};

const App = () => {
  return (
    <>
      <h2>react-router-v6-导航高亮</h2>
      {/* 导航高亮依旧是使用navLink */}
      {/* 没有activeClassName属性了，只能通过style属性传入函数的方式去解决了 */}
      <ul>
        <li>
          <NavLink
            to="/"
            style={({ isActive }) => {
              if (isActive) {
                return {
                  color: "green",
                };
              }
            }}
          >
            首页
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about"
            style={({ isActive }) => {
              if (isActive) {
                return {
                  color: "green",
                };
              }
            }}
          >
            关于页
          </NavLink>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/" element={<Home></Home>}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
